<template>
    <div class="w-full h-full flex justify-center select-none">
        <div
            class="lg:w-[500px] max-lg:w-4/5 space-y-2 absolute left-1/2 -translate-x-1/2 top-1/3 -translate-y-1/2 bg-white p-10 rounded-lg shadow-lg bg-opacity-65">
            <div class="flex justify-center">
                <img src="@/assets/logo.png" class="h-16 w-16 object-cover animate-pulse">
            </div>
            <div class="text-center font-bold text-zinc-700 py-2">某某销售管理系统</div>
            <div class="py-1"></div>
            <ypinput v-model="formData.username" :errormsg="formVerify.username" maxlength="22" :error="true"
                placeholder="输入账号">
                <template v-slot:prefix>
                    <div class="text-hui-100 pr-1">

                    </div>
                </template>
            </ypinput>
            <ypinput type="password" v-model="formData.password" :errormsg="formVerify.password" maxlength="22"
                :error="true" placeholder="输入密码" @keyup.enter="submit">
                <template v-slot:prefix>
                    <div class="text-hui-100 pr-1">

                    </div>
                </template>
            </ypinput>
            <div class="flex justify-center">
                <button type="button" class="btn btn-lan w-full" @click="submit">登录</button>
            </div>
        </div>
        <div class="absolute left-0 bottom-0 w-full text-center py-2 text-sm text-black opacity-50">
            Copyright © 2022 某某科技公司
        </div>
    </div>
</template>
<script setup>
import { postData, alter } from '@/common/base'
import store from '@/store'
import { reactive, watch } from 'vue'
import { router,loadAsyncRoutes } from '@/router'
const formData = reactive({
    username: '',
    password: ''
})
const formVerify = reactive({
    username: '',
    password: ''
})
watch(
    () => formData.username,
    (newVal, oldVal) => {
        if (newVal == '') {
            formVerify.username = '请输入账号'
        } else {
            formVerify.username = ''
        }
    }
)
watch(
    () => formData.password,
    (newVal, oldVal) => {
        if (newVal == '') {
            formVerify.password = '请输入密码'
        } else {
            formVerify.password = ''
        }
    }
)

const submit = async (e) => {
    let validationFailed = 0
    if (formData.username == '') {
        formVerify.username = '请输入账号'
        validationFailed++
    }
    if (formData.password == '') {
        formVerify.password = '请输入密码'
        validationFailed++
    }
    if (validationFailed > 0) {
        return false
    }
    //请求登录
    const resp = await postData('login.html', formData)
    if (resp.code == 1) {
        store.commit('SET_TOKEN', resp.data.token)
        await store.dispatch("GET_BASE");
        loadAsyncRoutes()
        alter({ type: 'alter-success', text: resp.msg })
        router.push('/')
    }
}
</script>
